<template>
  <div class="item-box" @click="handleId(id)">
    <img :src="data.images.small" alt class="pic" />
    <div class="content-box">
      <p class="title">
        {{data.title}}
        <span class="type">3D</span>
      </p>
      <p class="grade-box" v-show="data.rating.average">
        观众评分:
        <span class="grade">{{data.rating.average}}</span>
      </p>
      <p class="author">主演:{{data.casts|wordTeam()}}</p>
      <slot name="other"></slot>
    </div>
    <button class="btn">{{title}}</button>
  </div>
</template>

<script>
export default {
  name: "movieItem",
  props: {
    data: {
      type: Object
    },
    title: {
      type: String
    },
    id:{
      type:String
    }
  },
  methods:{
    handleId(id){
      this.$router.push({
        path:'/films/id',
        query:{
          id,
        }
      })
    }
  },
  filters: {
    wordTeam(parent) {
      var data = [];
      data = parent.map(item => {
        return item.name;
      });
      var str = data.join(" ");
      return str;
    },
    
  }
};
</script>

<style scoped>
.item-box {
  display: flex;
  width: 100%;
  height: 125px;
  box-sizing: border-box;
  padding: 15px;
  flex-direction: row;
  align-items: center;
}
.pic {
  width: 66px;
  height: 95px;
}
.content-box {
  width: 230px;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  color: #797d82;
  font-size: 13px;
}
.title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  width: 100%;
  font-size: 16px;
  margin-right: 5px;
}
.grade-box {
  margin: 4px 0 0;
}
.grade {
  color: #ffb232;
}
.author {
  margin: 4px 0 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.type {
  font-size: 12px;
  color: #fff;
  background-color: #d2d6dc;
  height: 14px;
  line-height: 14px;
  padding: 0 2px;
  border-radius: 2px;
}

.btn {
  width: 50px;
  height: 25px;
  background: white;
  font-size: 13px;
  border: 1px solid #ff5f16;
  color: #ff5f16;
}
</style>